<template>
  <!-- 订单管理 -->
  <div id="order_all">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input
            v-model="search.key"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
        >
          <el-button type="primary" @click="onsubmit"
          >查询
          </el-button
          >
        </el-form-item
        >
      </el-form>
      <el-button class="ebtn" type="warning" @click="orderadd()">新增订单</el-button>
    </div>

    <div class="table2_box">
      <template>
        <el-table :data="ListData" style=" margin: 10px 20px;width: calc(100% - 40px)" stripe :height="autoHeightTable">
          <el-table-column
            label="序号"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderNumber"
            label="订单号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="clientName"
            label="企业名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pay"
            label="付款方式"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createonTime"
            label="下单时间"
            align="center"
          >
            <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.createonTime) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="jiaohuoTime"
            label="交货日期"
            align="center"
          >
            <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.jiaohuoTime) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="contractType"
            label="合同类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="orderType"
            label="订单类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">待审核</span>
              <el-button v-if="scope.row.status == 2" type="text" size="medium"
                         @click="getBOhui(scope.row.checkflowId)">驳回
              </el-button>
              <!--              <span v-if="scope.row.status == '2'">驳回</span>-->
              <span v-if="scope.row.status == 3">待发货</span>
              <span v-if="scope.row.status == 4">已完成</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <el-row slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="dispatch(scope.row.id)"
                v-show="scope.row.status == '3'"
              >申请发货
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="orderdetails(scope.row.id, 1)"
              >详情
              </el-button
              >
            </el-row>
          </el-table-column>
        </el-table>
      </template>
      <el-dialog
        title="发货申请"
        :visible.sync="dialogVisible"
        width="70%"
        :modal-append-to-body="false"
      >
        <!--        <div class="color_box"></div>-->
        <div class="delivery_application">
          <div class="header_box">
            <ul>
              <li>
                <span>企业名称:</span>
                <el-input
                  v-model="clientMessage.enterpriseName"
                  style="width: 63%; margin: 0"
                  disabled
                ></el-input>
              </li>
              <li>
                <span>收货人:</span>
                <el-input
                  v-model="clientMessage.contacts"
                  style="width: 70%; margin: 0"
                  disabled
                ></el-input>
              </li>
              <li>
                <span>联系方式:</span>
                <el-input
                  v-model="clientMessage.contactsPhone"
                  style="width: 63%; margin: 0"
                  disabled
                ></el-input>
              </li>
              <li>
                <span>收货地址:</span>
                <el-input
                  v-model="clientMessage.adress"
                  style="width: 63%; margin: 0"
                  disabled
                ></el-input>
              </li>
              <li>
                <span>订单编号:</span>
                <el-input
                  v-model="clientMessage.salesOrderForm.orderNumber"
                  style="width: 63%; margin: 0"
                  disabled
                ></el-input>
              </li>
              <li>
                <span>订单类型:</span>
                <el-input
                  v-model="clientMessage.salesOrderForm.orderType"
                  style="width: 63%; margin: 0"
                  disabled
                ></el-input>
              </li>
            </ul>
          </div>
          <p>货物信息</p>
          <div class="cargo_information">
            <template>
              <el-table
                ref="multipleTable"
                :data="productList"
                tooltip-effect="dark"
                style="width: 100%"
                height="250px"

                stripe
              >
                <!--                @selection-change="handleSelectionChange"-->
                <el-table-column
                  type="selection"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="序号"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="productName"
                  label="产品名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="productNumber"
                  label="产品类型"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="danwei"
                  label="计量单位"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="applyNumber"
                  label="申请中数量"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="xuqiuShuliang"
                  label="需求数量"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="kucunNumber"
                  label="库存数量"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="剩余数量"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.xuqiuShuliang - scope.row.applyNumber - scope.row.fahuoNumber }}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="fahuoNumber"
                  label="已发货数量"
                  align="center"
                ></el-table-column>
                <el-table-column label="本次发货" align="center">
                  <template slot-scope="scope">
                    <el-input
                      :disabled="scope.row.xuqiuShuliang - scope.row.applyNumber - scope.row.fahuoNumber==0"
                      v-model="scope.row.number"
                      @input="bcfh(scope.$index)"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="gitfahuo()"
          >确定</el-button
          >
          <el-button type="info" size="medium" @click="dialogVisible = false"
          >取消</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChangeqq"
        :page-count="total"
      ></el-pagination>
    </div>
    <el-dialog
      title="驳回详情"
      :visible.sync="dialogVisible_bohui"
      width="50%"
      :modal-append-to-body="false">
      <ul :data="bohuilist" class="bohuizujian">
        <li>
          <span>审核日期</span>
          <el-input v-model="bohuilist.checkTime" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>审核人</span>
          <el-input v-model="bohuilist.userName" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>驳回理由</span>
          <el-input v-model="bohuilist.bohuiReason" style="width: 70%;" disabled></el-input>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible_bohui = false">返 回</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      search: {key: "", start: "", end: ""},
      ListData: [{}],
      total: 1,
      current: 1,
      pagesize: 10,
      createonTime: "",
      jiaohuoTime: "",
      name: "",
      people: "",
      people1: "",
      phone: "",
      address: "",
      dialogVisible: false,
      dialogVisible_bohui: false,
      tableData: [{}],
      tableData1: [],
      tableData2: [],
      multipleTable: [],
      multipleSelection: [],
      compony: "",
      linkman: "",
      address1: "",
      phone1: "",
      idAdd: "",
      clientMessage: {
        enterpriseName: "",
        contacts: "",
        contactsPhone: "", adress: "",
        salesOrderForm: {
          orderNumber: "",
          orderType: "",
        },
      },
      productList: [],
      sofpId: "",
      edits: true,
      warehouseId: 0,
      bohuilist: {
        bohuiReason: "",
        checkTime: "",
        userName: "",
      },
    };
  },
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    },
  },
  created() {

    // this.getval(0);
    this.getList(0)
    // this.getxq()

  },

  methods: {
    getBOhui(checkflowId) {
      this.dialogVisible_bohui = true
      axios("/JX_java/procurement/getCheckFlowDetails?checkFlowId=" + checkflowId).then((res) => {
        // console.log(res)
        let relse = res.data.data
        this.bohuilist = relse
        // console.log(this.bohuilist)
      })
    },

    formatTime(data) {
      return data == null ? "" : data.substring(0, 10);
    },
    getList() {
      const json = {
        beginTime: this.search.start,
        endTime: this.search.end,
        key: this.search.key,
        pageNum: this.current,
        pageSize: this.pagesize,
      };
      const message = JSON.parse(localStorage.getItem("message"));
      axios
        .post(
          "/JX_java/sales/orderFrom/getSalesOrderFormList?userId=" + message.Id,
          json
        )
        .then((res) => {
          let temp = res.data.data.content;
          this.ListData = temp
          // console.log(temp, 11111111111)
          this.total = res.data.data.totalPages
          for (let i = 0; i < temp.length; i++) {
            let ttm = '';
            let iis = (temp[i].pay || []);
            if (iis.length != 0) {
              let ssd = JSON.parse(iis);
              for (let j = 0; j < ssd.length; j++) {
                ttm += ttm == '' ? ssd[j] : '-' + ssd[j]
              }
            }

            temp[i].pay = ttm
          }

          this.ListData = temp/* res.data.data.content*/;
        });
    },
    dispatch(id) {

      this.dialogVisible = true
      axios("/JX_java/sales/orderFrom/getApplyFahuo?orderId=" + id).then((res) => {

        if (res.data.data.clientMessage != null) {
          this.clientMessage = res.data.data.clientMessage
        }
        this.productList = res.data.data.productList
        // console.log(res.data.data.productList)
        for (let i = 0; i < this.productList.length; i++) {
          if (this.productList[i].kucunNumber === null) {
            this.productList[i].kucunNumber = "0"
          }
        }
        this.clientMessage.salesOrderForm = res.data.data.salesOrderForm
        console.log(res.data.data, "111111111111111111")
      });
    },
    chage(e) {
      if (e) {
        this.search.start = e[0];
        this.search.end = e[1];
      } else {
        this.search.start = "";
        this.search.end = "";
      }
    },
    onsubmit() {
      this.getList();
      // this.LoadContents();
    },
    //确认发货
    gitfahuo() {

      this.userId = JSON.parse(localStorage.getItem("message")).Id

      let param = [];

      this.productList.forEach(e => {
        if (e.number > 0) {
          const product = {
            "productId": e.sofpId,
            "warehouseId": e.warehouseId,
            "number": Number(e.number),
          }
          param.push(product)
        }

      })

      if (param.length == 0) {
        this.$message.error("未填写发货数量!");
        return
      }


      const message = JSON.parse(localStorage.getItem("message"));
      // console.log(param)
      // return
      axios
        .post(
          "/JX_java/sales/orderFrom/addSalesOrderFormLog?userId=" + this.userId,
          param
        )
        .then((res) => {

          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.dialogVisible = false
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    // 判断本次发货不能大于库存
    bcfh(index) {
      // this.warehouseId = warehouseId
      if (this.productList[index].kucunNumber < this.productList[index].number) {
        this.$message.error("库存不足,重新输入发货数量");
        this.productList[index].number = "";
      } else {
        if (this.productList[index].number > this.productList[index].xuqiuShuliang - this.productList[index].applyNumber - this.productList[index].fahuoNumber) {
          this.$message.error("此产品发货数量已超过上限!");
          this.productList[index].number = "";
        }
      }
    },
    // 分页
    handleCurrentChangeqq(e) {
      this.current = e
      this.getList();
    },
    //详情
    orderdetails(id, edit) {
      this.$router.push({
        path: "/OrderManagementXq",
        query: {id: id, edit: edit},
      });
    },
    //新增
    orderadd() {
      this.$router.push("/OrderManagementAdd");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.nav {
  background: $white;
  height: 50px;
  margin-top: 10px;
  width: 98%;
  padding: 0 1%;

  .search_box {
    width: 98%;
    padding-top: 5px;
  }
}

.table2_box {
  margin-top: 10px;
}

.block {
  text-align: center;
  padding-top: 10px;
}

//.delivery_application {
//  p {
//    height: 40px;
//    margin: 10px 0;
//    font-weight: bold;
//    line-height: 40px;
//
//    span {
//      background: $red;
//      color: $red;
//    }
//  }
//}

.header_box {
  //width: 100%;
  //height: 100px;
  line-height: 100px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.header_box ul {
  display: flex;
}

.header_box li {
  width: 33%;
  height: 80px;
  overflow: hidden;
}

.header_box li span {
  display: inline-block;
  height: 80px;
  font-size: $font-size-medium;
  color: $blackcolor;
  line-height: 80px;
  margin-left: 5px;
}

.color_box {
  width: 5px;
  height: 20px;
  background: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}

.total {
  height: 50px;
  line-height: 50px;
  width: 20%;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.bohuizujian {
  display: flex;
  flex-wrap: wrap;

  li {
    width: 33%;
    padding-top: 10px;
    text-align: center;

    span {
      display: inline-block;
      width: 25%;
    }
  }
}
</style>
<style>
/*.el-dialog__footer {*/
/*  text-align: center;*/
/*}*/

/*#order_all .el-dialog__body {*/
/*  padding-top: 0;*/
/*  padding-bottom: 0;*/
/*}*/
.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin: 0 20px;
  /*margin-bottom: 10px;*/
}

.demo-form-inline {
  display: inline-block;
}

.el-pagination {
  margin-top: 15px;
  text-align: center;
}

.ebtn {
  float: right;
  margin-right: 20px;
}

</style>
